<template>
  <div class="app-container">
    <div class="d-flex justify-space-between align-center">
      <span>{{ pageType === 'add' ? '新增配量' : '编辑配量' }}</span>
      <el-button type="primary" plain @click="$router.go(-1)">返回</el-button>
    </div>
    <div class="d-flex justify-center align-center mt-25">
      <el-form ref="form" :rules="rules" :model="form" label-width="85px">
        <el-form-item label="渠道:" prop="channelId">
          <el-select
            v-model="form.channelId"
            style="width: 320px"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in channelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="媒体:" prop="media">
          <el-select
            v-model="form.media"
            style="width: 320px"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in mediaList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="city">
          <el-select
            v-model="form.city"
            style="width: 320px"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in cityList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="每日量级:" prop="dayCount">
          <el-input
            v-model="form.dayCount"
            clearable
            placeholder="请输入每日量级"
          />
        </el-form-item>
        <el-form-item label="每周量级:" prop="weekCount">
          <el-input
            v-model="form.weekCount"
            clearable
            placeholder="请输入每周量级"
          />
        </el-form-item>
        <el-form-item label="每月量级:" prop="monthCount">
          <el-input
            v-model="form.monthCount"
            clearable
            placeholder="请输入每月量级"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  media,
  getAllChannelList,
  addRation,
  updateRation
} from '@/api/channel/index'
import { mapState } from 'vuex'
export default {
  name: 'RationCreate',
  data() {
    return {
      mediaList: [],
      channelList: [],
      form: {
        channelId: '',
        media: '',
        city: '',
        dayCount: '',
        weekCount: '',
        monthCount: '',
        id: ''
      },
      rules: {
        channelId: [
          { required: true, message: '请选择渠道', trigger: 'change' }
        ],
        media: [{ required: true, message: '请选择媒体', trigger: 'change' }],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        dayCount: [
          { required: true, message: '请输入每日量级', trigger: 'blur' }
        ],
        weekCount: [
          { required: true, message: '请输入每周量级', trigger: 'blur' }
        ],
        monthCount: [
          { required: true, message: '请输入每月量级', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState('app', ['cityList']),
    pageType() {
      return this.$route.params.type
    }
  },
  created() {
    console.log(this.$route)
    this.getMediaList()
    this.getAllChannelList()
    if (this.pageType === 'edit') {
      console.log('e')
      Object.keys(this.form).forEach(key => {
        this.form[key] = this.$route.params[key]
      })
    }
  },
  methods: {
    async getMediaList() {
      const res = await media()
      if (!res.result) return
      this.mediaList = res.data.map(item => {
        return {
          value: item,
          label: item
        }
      })
    },
    async getAllChannelList() {
      const res = await getAllChannelList()
      if (!res.result) return
      this.channelList = res.data.map(item => {
        return {
          value: item.id,
          label: item.nickname
        }
      })
    },
    async onSave() {
      try {
        await this.$refs['form'].validate()
        this.pageType === 'add' ? this.addRation() : this.updateRation()
      } catch (error) {}
    },
    async addRation() {
      const { code } = await addRation(this.form)
      if (code === 200) {
        this.$message.success('新增配量成功')
        this.$router.go(-1)
      }
    },
    async updateRation() {
      const { code } = await updateRation(this.form)
      if (code === 200) {
        this.$message.success('编辑配量成功')
        this.$router.go(-1)
      }
    }
  }
}
</script>
